<template>

  <div class="questions-body">

 	<div class="top-tis">
 		<Breadcrumb>
        	<Breadcrumb-item>你当前位置</Breadcrumb-item>
        	<Breadcrumb-item href="/index">首页</Breadcrumb-item>
       	 <Breadcrumb-item>问与答</Breadcrumb-item>
    	</Breadcrumb>
 	</div>	

  <Modal
      v-model="modal1"
      title="内容"
      :styles="{top: '20px'}">
      <div class="html-detail" v-html="contents">
          {{ contents }}
      </div>
  </Modal>
  <div class="content-search">
    
    <Input v-model="searchText"  placeholder="请输入中文或英文搜索术语...">
        
        <Button slot="append" @click="searchBtn" icon="ios-search" ></Button>

    </Input>  

  </div>
 	<div class="questions-view">
      <Table :columns="columns" :data="questionslist"></Table>

      <li style="margin:0 auto">
          <div style="padding:10px 20px;margin-left:30%;">
              <pagination :pagination="pagination"  @pagination="handlePage"></pagination>
          </div>
    </li>
 	</div>

  </div>
</template>
<style scoped>
   
   @import '../../assets/css/ccm.css';

</style>

<script>
import pagination from "../../components/pagination.vue";

export default {
  components:{
     pagination,
  },
          
  data(){

    return {

    	questionslist:[],
      searchText:'',
      modal1: false,
      contents: '',
      pagination: {
        total: 0,
        count: 0,
        per_page: 0,
        current_page: 1,
        total_pages: 0
      },
      columns: [
//          {
//              title: '时间（Time）',
//              key: 'inTimes',
//              width:130,
//              align: 'left',
//          },
//
//          {
//              title: '问题（中文）',
//              key: 'title',
//              align: 'left',
//          },

            {
                title: 'Question',
                key: 'english_title',
                align: 'left',
            },
//          {
//              title: '回答（中文）',
//              key: 'content',
//              align: 'left',
//              width:120,
//              render: (h, params) => {
//
//                  return h('div', [
//                      h('Button', {
//                          props: {
//                              type: 'text',
//                              size: 'small'
//                          },
//                          style: {
//                              marginTop: '5px'
//                          },
//                          on: {
//                              click: () => {
//                                  this.showContent(params.index, 'chn');
//                              }
//                          }
//                      }, '点击查看中文'),
//                      h('br'),
//                      h('Button', {
//                          props: {
//                              type: 'text',
//                              size: 'small'
//                          },
//                          style: {
//                              marginTop: '5px',
//                              marginButtom: '5px'
//                          },
//                          on: {
//                              click: () => {
//                                  this.showContent(params.index, 'english');
//                              }
//                          }
//                      }, '点击查看英文')
//                  ]);
//              }
//          },
//          {
//              title: '来源法规',
//              key: 'statute',
//              width: 300,
//              align: 'center',
//              render: (h, params) => {
//
//                  const colors = params.row.status === 1 ?  'green' : 'red';
//                  if ( params.row.statute ) {
//                      var d = [];
//                      for (var i = 0; i < params.row.statute.data.length; i++) {
//                         d.push( h('Tag', {}, params.row.statute.data[i].name) );
//                      };
//                      return h('div', d);
//                  }else {
//                      return h('div', [
//                          h('Tag', {}, '暂无')
//                      ]);
//                  }
//                  
//              }
//          },
            {
              title: '详情',
              key: 'action',
              width: 150,
              align: 'center',
              render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                              type: 'success',
                              size: 'small'
                          },
                          style: {
                              marginRight: '5px'
                          },
                          on: {
                              click: () => {
                                  this.routeLink('/questions-content?id=' + params.row.id);
                              }
                          }
                      }, '中英文'),
                  ]);
              }
          }
        ],
    }

  },
  created() {

  	this.getCarousel();

  },
   watch: {
      $route() {
        this.getCarousel();
      }
  },
  methods:{

    getCarousel(){

    	this.$store.commit('mainLoading', true);

    	this.$http.get('/questions/list',{parames:{include:"category,statute"}}).then(questions => {

        	this.questionslist = questions.data.data;

          this.pagination = questions.data.meta.pagination;

        	this.$store.commit('mainLoading', false);


        	}).catch(err => {

            this.$Message.error( 'questions');
        
        })
    },
     // 分页方法
    handlePage(current) {

      this.pagination.current_page = current;

      this.search();
    },

    // 检索按钮方法
    search() {
      let query = {
        page: this.pagination.current_page,
        category: this.$route.query.category,
        name: this.$route.query.name
      };
      this.$router.push({path: this.$route.path, query});
    },

    routeLink(link) {
          this.$router.push({path: link});
    },
    // 查看内容
    showContent(index, type) {
      if ( type == 'english' ) {
        this.contents = this.questionslist[index].english_content;
      }else {
        this.contents = this.questionslist[index].content;
      }
      this.modal1 = true;
    },
   
    searchBtn(){

        var searchTextKey = this.searchText;

        // var language = (  /^[\u4e00-\u9fa5]+$/i.test(searchTextKey)  )  ? 'chinese' : 'english' ;


        if( searchTextKey =='' ){

          this.$Message.error( '请输入中文或英文搜索问答..');

          return;

        }else{

            this.$store.commit('mainLoading', true);

            this.$http.get('/questions/list/?include=category&title=' + searchTextKey).then(
              questions => {  

                  this.questionslist = questions.data.data;

                  this.$store.commit('mainLoading', false);

                }).catch(err => {

                  this.$Message.error( 'questions');
              
              })
           

        }


      }
      
  }
}
</script>


